import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { getDirTreeOnlyWithType, getUnitTree } from '/@/api/system/system';
import { h } from 'vue';
import { Select, Checkbox } from 'ant-design-vue';
import { getFormCheckCode } from '/@/api/formDesign/formDesign';
import { useUserStore } from '/@/store/modules/user';

const userStore = useUserStore();
const userinfo = userStore.getUserInfo;

export const checkCode = async (_rule, value) => {
  if (!value) {
    return Promise.reject('请输入');
  }
  const data = await getFormCheckCode({ code: value });
  if (data && !data?.res) {
    return Promise.reject(data.msg);
  }
  return Promise.resolve();
};
export const columns: BasicColumn[] = [
  {
    title: '编码',
    dataIndex: 'code',
    ellipsis: true,
    resizable: true,
  },
  {
    title: '表格名称',
    dataIndex: 'name',
    ellipsis: true,
    resizable: true,
  },
  {
    title: '流程类型',
    dataIndex: 'typeName',
    ellipsis: true,
    resizable: true,
  },
  {
    title: '是否保存历史记录',
    dataIndex: 'isLog',
    ellipsis: true,
    resizable: true,
  },
  {
    title: '是否带有附件',
    dataIndex: 'isHasAttachment',
    ellipsis: true,
    resizable: true,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'searchUnitCode',
    label: '单位',
    component: 'Select',
    colProps: { span: 6 },
    defaultValue: '',
    componentProps: {
      options: [{ value: '', label: '不限' }],
    },
  },
  {
    field: 'name',
    label: '编码或名称',
    component: 'Input',
    colProps: { span: 6 },
  },
  {
    field: 'isFlow',
    label: '类型',
    component: 'Select',
    colProps: { span: 6 },
    defaultValue: '',
    componentProps: {
      options: [
        { value: '', label: '不限' },
        { value: '1', label: '流程表单' },
        { value: '0', label: '模块表单' },
      ],
    },
  },
];

const files = [
  {
    label: '是',
    value: '1',
  },
  {
    label: '否',
    value: '0',
  },
];
export const formSchema: FormSchema[] = [
  {
    field: 'code',
    label: '表单编码',
    required: true,
    component: 'Input',
    colProps: { span: 24 },
    componentProps: {
      readonly: false,
    },
    // rules: [{ validator: checkCode, trigger: 'blur' }],
  },
  {
    field: 'name',
    label: '表单名称',
    required: true,
    component: 'Input',
    colProps: { span: 24 },
  },
  {
    field: 'isLog',
    label: '历史记录',
    component: 'Checkbox',
    renderComponentContent: '保留',
    colProps: { span: 24 },
    componentProps: {
      defaultValue: true,
    },
  },
  {
    field: 'hasAttachment',
    label: '带有附件',
    component: 'Select',
    // required: true,
    renderComponentContent: '弹窗通知',
    colProps: { span: 24 },
    render: ({ model, field }) => {
      if (model[field] == '1') {
        return h('div', null, {
          default: () => [
            h(Select, {
              value: model[field],
              options: files,
              style: 'width:60px;margin-right:10px',
              onChange: (value: string) => {
                model[field] = value;
              },
            }),
            h(
              Checkbox,
              {
                checked: model['isOnlyCamera'],
                onChange: (e) => {
                  model['isOnlyCamera'] = e.target.checked;
                },
              },
              '手机端只允许拍照，不能选择照片上传',
            ),
          ],
        });
      } else {
        return h(Select, {
          value: model[field],
          showImageUpload: false,
          options: files,
          onChange: (value: string) => {
            model[field] = value;
          },
        });
      }
    },
  },
  {
    field: 'isOnlyCamera',
    label: '手机端只允许拍照，不能选择照片上传',
    component: 'Checkbox',
    colProps: { span: 24 },
    show: false,
  },
  {
    field: 'viewRuleMode',
    label: '显示规则',
    defaultValue: false,
    component: 'Checkbox',
    colProps: { span: 24 },
    render: ({ model, field }) => {
      return h('div', null, {
        default: () => [
          h(
            Checkbox,
            {
              checked: model['viewRuleMode'],
              onChange: (e) => {
                model['viewRuleMode'] = e.target.checked;
              },
            },
            '应用显示规则时清空隐藏元素中的值',
          ),
        ],
      });
    },
  },
  {
    field: 'isFlow',
    label: '表单类型',
    component: 'RadioGroup',
    colProps: { span: 24 },
    required: true,
    defaultValue: '1',
    componentProps: {
      options: [
        {
          label: '流程型',
          value: '1',
        },
        {
          label: '模块型',
          value: '0',
        },
      ],
    },
  },
  {
    field: 'flowTypeCode',
    label: '流程类型',
    component: 'ApiTreeSelect',
    colProps: { span: 24 },
    componentProps: {
      api: getDirTreeOnlyWithType,
      fieldNames: { label: 'name', value: 'code' },
      showSearch: true,
      treeNodeFilterProp: 'name',
      getPopupContainer: () => document.body,
    },
    ifShow: ({ values }) => values.isFlow === '1',
  },
  {
    field: 'unitCode',
    label: '单位',
    component: 'ApiTreeSelect',
    defaultValue: userinfo.unitCode ? userinfo.unitCode : 'root',
    colProps: { span: 24 },
    componentProps: {
      api: getUnitTree,
      fieldNames: { label: 'name', value: 'code' },
      showSearch: true,
      treeNodeFilterProp: 'name',
      getPopupContainer: () => document.body,
    },
  },
];
